import React, {Component} from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  Button,
  ImageBackground,
  TextInput,
  FlatList,
} from 'react-native';
import {directorList} from '../../api/index';

// import {getData, storeData} from '../../../storage';
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
  defaultProps: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
  allowFontScaling: false,
});
const {height, width} = Dimensions.get('window');
let token = '';

export default class Specify extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //role:'',
      uid: '',
      name: '',
      portraitkey: '',
      remark: '',
      acceptorId: '',
      result: [],
    };
  }

  async getToken() {
    let param = {role: 2};
    let result = await directorList(param);
    this.setState({
      result: result,
    });
  }
  componentDidMount() {
    this.getToken();
  }
  //TODO 利用循环显示执行董事都有谁

  render() {
    return (
      <ScrollView>
        <View style={{backgroundColor: '#F3F7FA'}}>
          <View
            style={{
              marginTop: height * 0.0127,
              height: height * 0.8995,
              width: width,
              backgroundColor: '#FFFFFF',
            }}>
            <View
              style={{
                height: height * 0.0449,
                width: width,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  //fontFamily: 'MicrosoftYaHei',
                  fontSize: 12,
                  textAlign: 'left',
                  color: '#333333',
                }}>
                小贴士：点击头像可查看董事详细信息，点击右侧即可指名ta
              </Text>
            </View>
            <FlatList
              data={this.state.result.data}
              renderItem={({item}) => (
                <View>
                  <View style={styles.BorFather}>
                    <View style={styles.BorStyle} />
                  </View>
                  <View style={styles.DirectorView}>
                    <TouchableOpacity
                      style={{width: width * 0.2346}}
                      onPress={() =>
                        this.props.navigation.navigate('ShowOtherInfo', {
                          uid: item.uid,
                        })
                      }>
                      <View style={styles.PicStyle}>
                        <Image
                          style={{
                            resizeMode: 'cover',
                            width: height * 0.0719,
                            height: height * 0.0719,
                            borderRadius: height * 0.0719,
                          }}
                          source={{uri: item.portraitkey}}
                        />
                      </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        // storeData('acceptorId', item.uid);
                        // //alert(item.uid);
                        // storeData('portraitkey', item.portraitkey);
                        this.props.navigation.state.params.callback(
                          item.portraitkey,
                        );
                        this.props.navigation.state.params.uodateAcceptorId(
                          item.uid,
                        );
                        this.props.navigation.goBack();
                      }}>
                      <View
                        style={{width: width - 88, flexDirection: 'column'}}>
                        <Text style={styles.Text1}>{item.name}</Text>
                        <Text style={styles.Text2}>{item.remark}</Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
              )}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}
let styles = StyleSheet.create({
  BorFather: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
  BorStyle: {
    height: (height * 7.496) / 10000,
    width: width * 0.9013,
    borderWidth: (height * 7.496) / 10000,
    borderColor: '#E4E4E4',
  },
  DirectorView: {
    height: height * 0.1229,
    width: width,
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
  },
  PicStyle: {
    marginTop: height * 0.0374,
    marginLeft: width * 0.064,
    backgroundColor: '#CCCCCC',
    width: height * 0.0719,
    height: height * 0.0719,
    borderRadius: height * 0.0359,
  },
  Text1: {
    marginTop: height * 0.0314,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
    textAlign: 'left',
    color: '#1D1E2C',
  },
  Text2: {
    marginTop: height * 0.0232,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
    textAlign: 'left',
    color: '#4B4C5A',
  },
});
